<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <style type="text/css">
        .panel *{
            /*width: 100%;*/
            margin: 3px auto;
            text-align: center;
        }
    </style>

    <script>
        window.onload=function(){
            $.post("../q2SelectAll",{},function (data) {
                // alert(data[0].name);
                // var listTr = $("#list");
                // var listBody = document.getElementById('listBody');

                var ltable = document.getElementById('listTable');
                for (var i = 0; i<data.length; i++){

                    var row = ltable.insertRow(i+1);

                    var c0 = row.insertCell(0);
                    c0.innerHTML = data[i].id;
                    var c1 = row.insertCell(1);
                    c1.innerHTML = "<img id=\"pic\" height=\"40px\" src=\"../img/person/"+data[i].id+".jpg\">";
                    var c2 = row.insertCell(2);
                    c2.innerHTML = data[i].name;
                    var c3 = row.insertCell(3);
                    c3.innerHTML = sexSelect(data[i].id,data[i].sex);
                    var c4 = row.insertCell(4);
                    c4.innerHTML = data[i].telephone;
                    var c5 = row.insertCell(5);
                    c5.innerHTML = hobbySelect(data[i].id,data[i].hobby);
                    var c6 = row.insertCell(6);
                    c6.innerHTML = "<a href=\"update.html?id="+data[i].id+"\">编辑</a>";
                    var c7 = row.insertCell(7);
                    c7.innerHTML = "<a deleteLink=\"true\" href=\"../q2Delete?id="+ data[i].id +"\">删除</a>";
                }
            })
        }
        $(function () {

        });

        function sexSelect(id,sex) {
            var str = "";

            if (sex=="男") {
                str  = "<label><input name=\"ssex"+id+"\" type=\"radio\" value=\"男\" checked=\"checked\" />男 </label>\n" +
                    "   <label><input name=\"ssex"+id+"\" type=\"radio\" value=\"女\" />女 </label>";
            }

            if (sex=="女") {
                str  = "<label><input name=\"ssex"+id+"\" type=\"radio\" value=\"男\" />男 </label>\n" +
                    "   <label><input name=\"ssex"+id+"\" type=\"radio\" value=\"女\" checked=\"checked\" />女 </label>";
            }

            return str;
        }

        function hobbySelect(id,hobby) {
            var str = "";

            // for (var i =0;i<3;i++){
            //     h = hobby[i];
            // alert(hobby);
            var idArr = [];
            for (var i = 0;i<hobby.length;i++){
                idArr[i] = hobby[i].id;
            }

            if (idArr.indexOf(1) > -1){
                // alert(1);
                str = str + "<label><input name=\"shobby[0].name"+id+"\" type=\"checkbox\" value=\"唱歌\" checked=\"checked\"/>唱歌</label>"
            } else {
                str = str + "<label><input name=\"shobby[0].name"+id+"\" type=\"checkbox\" value=\"唱歌\" />唱歌</label>"

            }
            if (idArr.indexOf(2) > -1) {
                str = str + "<label><input name=\"shobby[1].name"+id+"\" type=\"checkbox\" value=\"跳舞\" checked=\"checked\"/>跳舞 </label>"
            }else {
                str = str + "<label><input name=\"shobby[1].name"+id+"\" type=\"checkbox\" value=\"跳舞\" />跳舞</label>"
            }
            if (idArr.indexOf(3) > -1){
                str = str + "<label><input name=\"shobby[2].name"+id+"\" type=\"checkbox\" value=\"画画\" checked=\"checked\"/>画画</label>"

            } else {
                str = str + "<label><input name=\"shobby[2].name"+id+"\" type=\"checkbox\" value=\"画画\" />画画</label>"

            }
            // }

            return str;
        }

        function uploadPic() {
            var pic = document.getElementById('inputPic');
            var fd = new FormData();

            // fd.append($('#name').attr('name'),$('#name').val())
            fd.append("image",pic.files[0]);

            $.ajax({
                type: "POST",
                url: "../q2AddPic",
                data: fd,
                async: false,
                contentType: false,
                processData: false,
                success: function (res) {

                },
                error: function (res) {
                }
            })
            // alert($('#').val());
            // alert(pic.files[0].name);
            // alert(pic.files[2]);

        }

    </script>
</head>
<body>

<div class="listDataTableDiv">
    <table id="listTable" class="table table-striped table-bordered table-hover  table-condensed">
        <tr class="success">
            <th>ID</th>
            <th>图片</th>
            <th>名字</th>
            <th>性别</th>
            <th>电话</th>
            <th>爱好</th>
            <th>修改</th>
            <th>删除</th>
        </tr>


    </table>
</div>
<div class="panel panel-warning addDiv">
    <div class="panel-heading">新增员工</div>
    <div class="panel-body">
        <form method="POST" id="addForm" action="../q2Add" enctype="multipart/form-data">
            <table class="addTable">
                <tr>
                    <td>名称</td>
                    <td><input  id="name" name="name" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <label><input name="sex" type="radio" value="男" />男 </label>
                        <label><input name="sex" type="radio" value="女" />女 </label>
                    </td>
                </tr>
                <tr>
                    <td>电话号</td>
                    <td><input id="telephone" name="telephone" type="text"></td>
                </tr>
                <tr>
                    <td>爱好</td>
                    <td>
                        <label><input  name="hobby[0].name" type="checkbox" value="唱歌" />唱歌 </label>
                        <label><input name="hobby[1].name" type="checkbox" value="跳舞" />跳舞 </label>
                        <label><input name="hobby[2].name" type="checkbox" value="画画" />画画 </label>
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input id="inputPic" accept="image/*" type="file" name="image" />
                    </td>
                </tr>
                <tr class="submitTR">
                    <td colspan="2" align="center">
                        <button type="" class="btn btn-success" >提 交</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>